<template>
  <section class="container_box">
    <container-box title="出勤统计">
      <div class="flex-between">
        <chart-ring id="chart1" :data="data" :style="style" />
        <chart-ring id="chart2" :data="data2" :style="style2" />
      <!-- <chart-ring id="chart3" /> -->
      </div>
    </container-box>

    <container-box title="气压检测">
      <div class="flex-between">
        <chart-board id="chart3" :data="data" :vstyle="style3" />
      <!-- <chart-ring id="chart3" /> -->
      </div>
    </container-box>
  </section>
</template>

<script lang="ts">
import chartRing from '@/components/chart-ring.vue'
import chartBoard from '@/components/chart-board.vue'

import containerBox from '@/components/box.vue'
// new Array(this.totalCount).fill().map((_, idx) => idx)

export default {
  components: {
    chartRing,
    chartBoard,
    containerBox
  },
  data () {
    return {
      data: {
        value: 12.25,
        unit: 'mm',
        remark: '位移',
        // 圆环的分段数
        subSum: 10
      },
      data2: {
        value: '阿巴',
        unit: 'dd',
        remark: '沉降'
      },
      style: {
        // 内圆半径 决定圆心的渐变球大小
        innerRadius: 37,
        // 外圆半径 环形宽度 = 外圆半径 - 内圆半径
        outerRadius: 44,
        // 渐变球的颜色
        cilcleColor: '#0f828d',
        // 边框、高亮颜色
        borderColor: '#22becc',
        // 圆环分段间隙颜色
        spaceColor: '#161a1f'
      },
      style2: {
        innerRadius: 37,
        outerRadius: 44,
        cilcleColor: '#04a289',
        borderColor: '#0cdfbf',
        spaceColor: '#161a1f'
      },
      style3: {
        outer: {
          color: '',
          startColor: '#0886dd',
          endColor: '#0ce3f5',
          borderColor: '#161a1f',
          backgroundColor: '#2b3e51'
        },
        inner: {
          color: '',
          startColor: '#08a684',
          endColor: '#00fed3',
          backgroundColor: '#2b3e51'
        },
        circle: {
          color: '#0caebc',
          centerColor: '#0095ff',
          centerBorderColor: '#fff'
        },
        pointer: {
          color: '#14c4fa',
          startColor: '#0299fe',
          endColor: '#41ecfb'
        },
        pedestal: {
          color: '#0768ad',
          width: ''
        }
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.container_box{
  width: 100vw;
  height: 100vh;
  background-color: #2e3540;
}
</style>
